<template>
    <div>
        <div class="tabNav">
            <router-link to="/index">
                <img src="../assets/img/sidebar1.png" />首页
            </router-link>
            <b>/<img style="top: 1px" src="../assets/img/settlement.png" />结算信息</b>
            <el-input
                placeholder="请输入结算单号进行搜索"
                suffix-icon="el-icon-search"
                @change="searchMethods"
                v-model="searchValue">
            </el-input>
            <em><i style="font-size: 16px;margin-right: 5px;" class="el-icon-s-data"></i>结算数量：{{ settlementCountNumber }}</em>
        </div>
        <el-row :gutter="24">
            <el-col :span="24">
                <el-card class="cardTits cardTitss cardTitdd" shadow="hover">
                    <settlement-table ref="searchMethods" :search="searchValue"></settlement-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import SettlementTable from '../components/table/SettlementTable.vue'
export default {
    name: "dashboard",
    data() {
        return {
            searchValue: '',
			settlementCountNumber: 0 // 结算数量
        };
    },
    components: {
		SettlementTable
    },
	mounted() {
		this.settlementCount()
	},
    methods: {
		searchMethods() {
			// 搜索
			this.$refs.searchMethods.getTableData()
		},
		settlementCount() {
			// 获取结算数量
			this.$http({
				url: '/api/settlement/selectSettlementCount',
				method: 'post',
				headers: {
					'Content-Type': 'application/json'
				}
			}).then(data => {
				if(data.code === 0) {
					this.settlementCountNumber = data.result
				}
			})
		}
    }
};
</script>